<template>
  <div class="login-content">
    <img class="logo" src="../assets/logo.jpeg" />
    <van-form @submit="onSubmit">
      <van-field
        label="手机号"
        type="tel"
        name="phoneNumber"
        v-model="phone"
        :rules="[
          { required: true, message: '请输入正确的手机号', pattern: /^\d{11}$/ }
        ]"
        placeholder="手机号"
      />
      <van-field
        label="身份证号"
        type="tel"
        name="idCard"
        v-model="idCard"
        :rules="[
          {
            required: true,
            message: '请输入正确的身份证号',
            pattern: /^\d{15,18}$/
          }
        ]"
        placeholder="身份证号"
      />
      <van-field
        v-model="verifycode"
        center
        clearable
        name="verifyCode"
        label="验证码"
        :rules="[{ required: true, message: '未填写验证码' }]"
        placeholder="验证码"
      >
        <van-button
          slot="button"
          size="small"
          class="btn-color"
          native-type="button"
          @click="sendVerifycode()"
          :disabled="
            !disabledCodeBtn ||
              idCard.length < 15 ||
              idCard.length > 18 ||
              phone.length != 11
          "
          >{{ codeText }}</van-button
        >
      </van-field>
      <van-checkbox class="rember-me" v-model="checked">记住我</van-checkbox>

      <div class="btn padding">
        <van-button
          :disabled="
            idCard.length < 15 ||
              idCard.length > 18 ||
              phone.length != 11 ||
              verifycode.length == 0
          "
          class="btn-color"
          size="large"
          >查询</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import axios from "axios";
import protocol from "../api";
import qs from "qs";
import { Toast } from "vant";

export default {
  name: "login",
  data() {
    return {
      phone: "",
      verifycode: "",
      idCard: "",
      codeText: "获取",
      disabledCodeBtn: true,
      checked: true
    };
  },
  mounted() {
    const token = localStorage.getItem("token");
    if (token) {
      this.$router.push({
        path: "/result",
        query: {
          token
        }
      });
    }
  },
  methods: {
    //发送验证码
    sendVerifycode() {
      const _that = this;
      this.countDown(60);
      // 获取验证码
      axios
        .post(
          `${protocol}/GetCode`,
          qs.stringify({
            phone: _that.phone
          }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(function(res) {
          if (res && res.data && res.data.data) {
            Toast.success("获取验证码成功");
            console.log("获取验证码成功", res);
          } else {
            Toast.fail("获取验证码失败");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = true;
        this.codeText = "获取";
        return;
      } else {
        this.disabledCodeBtn = false;
        this.codeText = "重新发送(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
    onSubmit() {
      const _that = this;
      console.log(
        qs.stringify({
          phone: _that.phone,
          id_card: _that.idCard,
          code: _that.verifycode
        })
      );
      axios
        .post(
          `${protocol}/AddWages`,
          qs.stringify({
            phone: _that.phone,
            id_card: _that.idCard,
            code: _that.verifycode
          }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(function(res) {
          if (res && res.data && res.data.data && res.data.code != -1) {
            console.log("注册成功", res.data);
            _that.$router.push({
              path: "/result",
              query: {
                token: res.data.data
              }
            });
            if (typeof res.data.data === "string" && _that.checked) {
              localStorage.setItem("token", `${res.data.data}`);
            }
          } else {
            Toast.fail(
              (res && res.data && res.data.msg) ||
                "查询失败"
            );
            console.log("注册失败");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.btn-color {
  background: rgb(100, 34, 37);
  color: #fff;
}
.login-content {
  padding-top: 15%;
}
.padding {
  padding: 40px 15px;
}
.logo {
  display: block;
  margin: 0 auto;
  margin-bottom: 10%;
  width: 200px;
  height: 125px;
}
.rember-me{
  margin: 20px 0 0 20px;
}
</style>

